<template>
  <el-container style="display: flex; height: 100vh">
    <el-header
      height="100px"
      style="background-color: #eae5e3; line-height: 100px"
    >
      <el-row>
        <el-col :span="4" :push="4" class="logo">N</el-col>
        <el-col :span="4" :push="3" style="font-size: 40px; font-weight: 600"
          >欢迎登录</el-col
        >
      </el-row>
    </el-header>
    <el-main style="background-color: #f5f3f2; flex: 1">
      <el-row>
        <el-col :span="6" :push="16">
          <el-card>
            <template #header>
              <div class="header">
                <span
                  :class="isActive == 0 ? 'active' : ''"
                  @click="isActive = 0"
                  >扫码登录</span
                >
                <el-divider
                  style="height: 50px"
                  direction="vertical"
                ></el-divider>
                <span
                  :class="isActive == 1 ? 'active' : ''"
                  @click="isActive = 1"
                  >账户登录</span
                >
              </div>
            </template>

            <div v-show="isActive == 0" class="card-pane">
              <el-image
                style="width: 300px; height: 300px; align-content: center"
              >
                <template #placeholder>
                  <div class="image-slot">
                    Loading<span class="dot">...</span>
                  </div>
                </template>
              </el-image>
            </div>

            <div v-show="isActive == 1" class="card-pane">
              <el-form
                :model="userInfo"
                style="
                  height: 200px;
                  display: flex;
                  justify-self: center;
                  flex-direction: column;
                "
              >
                <el-form-item>
                  <el-input placeholder="账号" v-model="userInfo.username">
                    <template #prepend
                      ><el-icon><User /></el-icon
                    ></template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-input
                    placeholder="密码"
                    v-model="userInfo.password"
                    type="password"
                  >
                    <template #prepend
                      ><el-icon><Lock /></el-icon
                    ></template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <router-link
                    to="/findPassword"
                    style="
                      width: 100%;
                      display: flex;
                      flex-direction: row-reverse;
                    "
                    >忘记密码</router-link
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    style="
                      width: 100%;
                      background-color: #3271ae;
                      color: #f5f3f2;
                    "
                    @click="doLogin"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>

              <el-divider></el-divider>

              <router-link
                to="/register"
                style="
                  font-size: 14px;
                  display: flex;
                  flex-direction: row-reverse;
                "
                >立即注册</router-link
              >
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <el-footer style="height: 100px; background-color: #eae5e3"> </el-footer>
  </el-container>
</template>

<script>
import { login } from "@/api/user";
import { useUserInfo } from "@/store/user.js";
const userInfoState = useUserInfo();

export default {
  data() {
    return {
      isActive: 1,
      userInfo: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    doLogin() {
      login(this.userInfo.username, this.userInfo.password).then((res) => {
        userInfoState.name = res.name;
        userInfoState.avatar = res.avatar;
        userInfoState.address = res.address;
        userInfoState.authorization = res.authorization;
        this.$router.push({ path: "/" });
      });
    },
  },
};
</script>

<style scoped>
.logo {
  height: 100px;
  font-size: 100px;
  text-align: center;
  line-height: 100px;
  color: #3271ae;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 25px;
  height: 50px;
  line-height: 50px;
  font-weight: 600;
}

.active {
  color: #3271ae;
}

.card-pane {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
</style>